<template>
<div class="basic-command">
    <p>这是基本命令</p>
    <h1>{{msg}}</h1>
    <h1 v-html="htmlSpan"></h1>

    <img src="//www.baidu.com/img/baidu_sylogo1.gif" />

    <img v-bind:src="imgUrl" />
    <img :src="imgUrl" />

    <button v-on:click="btnAction">点击</button>
    <button @click="btnAction">简写点击</button>

    <p v-if="isActive">v-if true truetruetruetruetruetruetrue</p>
    <p v-else>v-if false falsefalsefalsefalsefalsefalsefalse</p>
    <p v-show="isActive">v-show  afaadflasfl</p>
    <button @click="switchActive">切换状态</button>

    <p v-if="num == 0">num 为 0</p>
    <p v-else-if="num == 1">num 为 1</p>
    <p v-else>num 非 0 非 1</p>
    <button @click="changeNum(0)">修改为0</button>
    <button @click="changeNum(1)">修改为1</button>
    <button @click="changeNum(3)">修改为3</button>
    <!-- <div :style="styleStr">
        test
    </div>

    <div :class="classStr">
        111
    </div> -->
</div>

</template>

<script>
export default {
    data(){
        return {
            msg: "hello world",
            htmlSpan: "<span>这是一个html插值</span>",
            imgUrl:"//www.baidu.com/img/baidu_sylogo1.gif",
            // styleStr:"color:red",
            // classStr: "box content"
            isActive: true,
            num: 0
        }
    },
    methods:{
        btnAction() {
            console.log(123);
        },
        switchActive(){
            this.isActive = !this.isActive
            console.log('this.isActive',this.isActive);
        },
        changeNum(number){
            this.num = number
            console.log('this.num',this.num);

        }
    }
}
</script>

<style scoped>
.box {
    color: red;
}
.content {
    background: yellow;
}
.basic-command {
    text-align: center;
}
</style>